<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <link
      rel="stylesheet"
      href="https://unpkg.com/leaflet@1.9.3/dist/leaflet.css"
      integrity="sha256-kLaT2GOSpHechhsozzB+flnD+zUyjE2LlfWPgU04xyI="
      crossorigin=""
    />
    <style type="text/css">
      #map {
        height: 700px;
        width: 1000px;
        margin: auto;
      }
    </style>
  </head>

  <body>
    <!-- 容器存放地图 -->
    <div id="map"></div>
    <div class="text">
      <h2>术语介绍</h2>
      <ul>
        <li>经纬度</li>
        <li>
          瓦片:地图的图片,按固定尺寸分割<br />为了提高地图的响应速度,很多项目用Maperitive软件下载瓦片形成的离线图片
        </li>
        <li>
          setView:设置地图初始化位置；<br />参数1:经纬度坐标,arry,[维度,经度];<br />参数2:缩放比例,number
        </li>
        <li>
          配置布局,tileLayer:<br />参数1:瓦片数据地址;xy经纬度,z缩放比例<br />参数2:地图参数,
        </li>
        <li>marker,添加标记； 参数1: 坐标 ;参数2: 图标(省略为默认)</li>
        <li>
          脚本配置地图,瓦片数据地址可以是公网提供，也可以是内网私服<br />
          leaflet 官网地址： https://tile.openstreetmap.org/{z}/{x}/{y}.png<br />
          高德地图矢量地图：
          https://webrd04.is.autonavi.com/appmaptile?lang=zh_cn&size=1&scale=1&style=7&x={x}&y={y}&z={z}<br />
          高德地图卫星地图：
          https://webst01.is.autonavi.com/appmaptile?style=6&x={x}&y={y}&z={z}
          <br />
          内网地址： http://10.87.211.254:8099/title/{z}/{x}/{y}.png<br />
          各个地图网址：'https://zhuanlan.zhihu.com/p/641436984'
        </li>
      </ul>
    </div>
    <!-- Make sure you put this AFTER Leaflet's CSS -->
    <script
      src="https://unpkg.com/leaflet@1.9.3/dist/leaflet.js"
      integrity="sha256-WBkoXOwTeyKclOHuWtc+i2uENFpDZ9YPdf5Hf+D7ewM="
      crossorigin=""
      type="text/javascript"
    ></script>
    <script type="text/javascript">
      // All the code for the leaflet map will come here
      // 获取地图，初始化位置-------------------------------------
      let map = L.map("map").setView(
        [29.44916482692468, 106.47399902343751],
        7
      );
      // 配置布局----------------------------------------------------------https://tile-b.openstreetmap.fr/hot/{z}/{x}/{y}.png
      L.tileLayer("https://tile-c.openstreetmap.fr/hot/{z}/{x}/{y}.png", {
        attribution:
          '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors',
        maxZoom: 18,
      }).addTo(map);
      // 给地图添加点击-------------------------------------------
      let arrLatlng = [];
      // 多边形点数------------------------------------------
      let point = 6;
      map.on("click", function (e) {
        console.log("e.latlng,获取经纬度", e.latlng);
        let latlng = e.latlng;
        map.setView(latlng, 7);
        // 点击添加图标--------------------------------------
        L.marker(latlng).addTo(map);
        arrLatlng.push(latlng);
        console.log("arrLatlng", arrLatlng);
        if (arrLatlng.length > 1) {
          // 线段 连续线段--------------------------------------
          let line = L.polyline(
            [arrLatlng[arrLatlng.length - 2], arrLatlng[arrLatlng.length - 1]],
            {
              opacity: 1,
              color: "green",
            }
          ).addTo(map);
        }
        // 多边形-----------------------------------------------
        if (arrLatlng.length == point) {
          let polygon = L.polygon(arrLatlng, { color: "red" }).addTo(map);
        }
        // 矩形，两个点-------------------------------------------------------------
        let rectangle = L.rectangle(
          arrLatlng.slice(arrLatlng.length - 2, arrLatlng.length),
          { color: "pink" }
        ).addTo(map);
        // 圆形 一个点 以及半径--------------------------------------------------------
        let circle = L.circle(latlng, {
          color: "black", //轨迹颜色
          fillColor: "pink", //默认和轨迹色一样
          fillOpacity: 0.3,
          radius: 500 * 100, //半径，单位为米
        }).addTo(map);
      });

      // 添加标记-----------------------------------------------------------
      let markerIcon = L.icon({
        iconUrl: "https://unpkg.com/leaflet@1.9.3/dist/images/marker-icon.png",
        iconSize: [20, 30],
      });
      // 静态标记 v
      L.marker([29.44916482692468, 106.47399902343751], { icon: markerIcon })
        .addTo(map)
        .bindPopup("A pretty CSS popup.<br> Easily customizable.")
        .openPopup();
      L.marker([27.595934774495056, 106.9903564453125], { icon: markerIcon })
        .addTo(map)
        .bindPopup("A pretty CSS popup.<br> Easily customizable.");
      // // 线段
      // let line = L.polyline([[29.44916482692468, 106.47399902343751], [27.595934774495056, 106.9903564453125]],
      //   {
      //     opacity: 1,
      //     color: 'red'
      //   }).bindPopup('线').addTo(map)
      // 多边形
      // let polygon = L.polygon(arrLatlng, { color: "red" }).addTo(map);
    </script>
  </body>
</html>
